<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('设备看板')" />
    <link th:href="@{/css/eqpbar/eqpbar.css}" rel="stylesheet">
</head>
<body>
    <div class="t_container">
        <header class="t_h_bg">
            <h1>设备看板</h1>
            <span id="showTime"></span>
        </header>
        <main class="t_main">
            <div class="t_left">
                <div class="t_left_up">
                    <div class="t_box1">
                        <header class="t_title">
                            <span>设备维护信息概览</span>
                        </header>
                        <div class="t_list">
                            <div class="main_table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>设备当前状态</th>
                                            <th>维护标准周期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>上次维护时间</td>
                                            <td class="lastPmTime">[[${eqppminfo.lastPmTime}]]</td>
                                            <td class="pmStandardTime">[[${eqppminfo.pmStandardTime}]]</td>
                                        </tr>
                                        <tr>
                                            <td>已过片数</td>
                                            <td>
                                                <span class="haveTrackedInQty" th:if="${eqppminfo.haveTrackedInQty}">
                                                    [[${eqppminfo.haveTrackedInQty}]]&nbsp;片
                                                </span>
                                            </td>
                                            <td>
                                                <span class="pmTrackInQty" th:if="${eqppminfo.pmTrackInQty}">
                                                    [[${eqppminfo.pmTrackInQty}]]&nbsp;片
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>连续生产时长</td>
                                            <td>
                                                <span class="continueTime" th:if="${eqppminfo.continueTime}">
                                                    [[${eqppminfo.continueTime}]]&nbsp;day
                                                </span>
                                            </td>
                                            <td>
                                                <span class="pmContinueTime" th:if="${eqppminfo.pmContinueTime}">
                                                    [[${eqppminfo.pmContinueTime}]]&nbsp;day
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="t_left_down">
                    <div class="t_box2">
                        <header class="t_title">
                            <span>菜单信息概览</span>
                        </header>
                        <div class="t_list">
                            <div class="main_table">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>菜单名称</th>
                                        <th>菜单描述</th>
                                    </tr>
                                    </thead>
                                    <tbody class="eqp_menu_circle" th:fragment="eqp_menu_circle">
                                    <tr th:each="menuinfo : ${eqpmenuinfo}">
                                        <td th:text="${menuinfo.menu}"></td>
                                        <td th:text="${menuinfo.menuDesc}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="t_center">
                <div class="t_box3">
                    <header class="t_title">
                        <span>设备信息概览</span>
                    </header>
                    <div class="t_list">
                        <div class="main_table">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>提示信息</td>
                                        <td>
                                            <span class="eqp-prompt">[[${eqpbarinfo.promptInfo}]]</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>当前状态</td>
                                        <td class="eqp_status">[[${eqpbarinfo.status}]]</td>
                                    </tr>
                                    <tr>
                                        <td>当前状态开始时间</td>
                                        <td class="eqp_status_start_time">[[${eqpbarinfo.statusStartTime}]]</td>
                                    </tr>
                                    <tr>
                                        <td>状态持续时长</td>
                                        <td class="eqp_statusDurTime">[[${eqpbarinfo.statusDurTime}]] 小时</td>
                                    </tr>
                                    <tr>
                                        <td>当班设备负责人</td>
                                        <td class="eqp_eqpChargePeople">[[${eqpbarinfo.eqpChargePeople}]]</td>
                                    </tr>
                                    <tr>
                                        <td>当前状态预计结束时间</td>
                                        <td class="eqp_statusEndTime">[[${eqpbarinfo.statusEndTime}]]</td>
                                    </tr>
                                    <tr>
                                        <td><span>设备ID：</span></td>
                                        <td><span class="eqp_equipmentId">[[${eqpbarinfo.equipmentId}]]</span></td>
                                    </tr>
                                    <tr>
                                        <td>每日产能</td>
                                        <td class="eqp_everQty">[[${eqpbarinfo.everQty}]] 片</td>
                                    </tr>
                                    <tr>
                                        <td>当日产量</td>
                                        <td class="eqp_nowDayQty">[[${eqpbarinfo.nowDayQty}]] 片</td>
                                    </tr>
                                    <tr>
                                        <td>前24h产量</td>
                                        <td class="eqp_front24Qty">[[${eqpbarinfo.front24Qty}]] 片</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="t_right">
                <div class="t_box4">
                    <header class="t_title">
                        <span>设备当前在制品统计</span>
                    </header>
                    <div class="t_list">
                        <div class="main_table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>状态</th>
                                        <th>数量</th>
                                        <th>时长</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="wip-status">RUN</td>
                                        <td>
                                            <a href="javascript:void(0)" th:onclick="wipqtydetail([[${eqpbarinfo.equipmentId}]], 'RUN')" >
                                                <span class="runWipQty" th:if="${eqpwipinfo.runWipQty}">
                                                    [[${eqpwipinfo.runWipQty}]]&nbsp;片
                                                </span>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="runWipStatusDuration" th:if="${eqpwipinfo.runWipStatusDuration}">
                                                [[${eqpwipinfo.runWipStatusDuration}]]&nbsp;day
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="wip-status">WAIT</td>
                                        <td>
                                            <a href="javascript:void(0)" th:onclick="wipqtydetail([[${eqpbarinfo.equipmentId}]], 'WAIT')" >
                                                <span class="waitWipQty" th:if="${eqpwipinfo.waitWipQty}">
                                                    [[${eqpwipinfo.waitWipQty}]]&nbsp;片
                                                </span>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="waitWipStatusDuration" th:if="${eqpwipinfo.waitWipStatusDuration}">
                                                [[${eqpwipinfo.waitWipStatusDuration}]]&nbsp;day
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="wip-status">HELD</td>
                                        <td>
                                            <a href="javascript:void(0)" th:onclick="wipqtydetail([[${eqpbarinfo.equipmentId}]], 'HELD')" >
                                                <span class="heldWipQty" th:if="${eqpwipinfo.heldWipQty}">
                                                    [[${eqpwipinfo.heldWipQty}]]&nbsp;片
                                                </span>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="heldWipStatusDuration" th:if="${eqpwipinfo.heldWipStatusDuration}">
                                                [[${eqpwipinfo.heldWipStatusDuration}]]&nbsp;day
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <div th:include="include :: footer"></div>
    <script th:src="@{/js/eqpbar/eqpbar.js}"></script>
    <script th:inline="javascript">
		const prefix = ctx + "equipment/eqpchar";

        // 信息紧急程度的颜色：高-红，中-黄，低-绿色
        var json=eval({ color:{
                "1":"red", "2":"yellow", "3":"green"
            }}
        );
        var infoUrgency = [[${eqpbarinfo.infoUrgency}]];
        var equipmentId = [[${equipmentId}]];

        $(function() {
            if (null != infoUrgency) {
                document.getElementsByClassName("eqp-prompt")[0].style.color = json.color[infoUrgency];
            }
            refresh_t_center();
        });
        var t = null;
        // 开始运行
        t = setTimeout(refresh_t_center, 3000);

        function refresh_t_center() {
            clearTimeout(t);//清除定时器
            $.ajax({
                type: "get",
                url: prefix + "/getEqpDetailInfo?equipmentId=" + equipmentId,
                success: function(result) {
                    var eqpDetailInfo = result.data;
                    // 设置设备详细信息
                    seteqpDetailInfo(eqpDetailInfo);
                }
            });
            setTimeout(refresh_t_center, 3000); //设定定时器，循环运行
        }

        // 设备在制品信息详情跳转
        function wipqtydetail(equipmentId, status) {
            console.log("设备在制品信息详情跳转,equipmentId=" + equipmentId + ",status=" + status);
            var url = prefix + "/getWipInfoByEqpid?equipmentId=" + equipmentId + "&status=" + status;
            var options = {
                title: '设备相关在制品详情',
                btn: 0,
                url: url,
                full: true
            };
            $.modal.openOptions(options);
        }

        // 设置设备详细信息
        function seteqpDetailInfo(eqpDetailInfo) {
            // 设置设备的提示信息
            var promptinfo = eqpDetailInfo.equipmentRealInfo;
            $(".eqp-prompt").html(promptinfo.promptInfo);
            document.getElementsByClassName("eqp-prompt")[0].style.color = json.color[promptinfo.infoUrgency];
            $(".eqp_status").html(promptinfo.status);
            $(".eqp_status_start_time").html(promptinfo.statusStartTime);
            $(".eqp_statusDurTime").html(promptinfo.statusDurTime + " 小时");
            $(".eqp_eqpChargePeople").html(promptinfo.eqpChargePeople);
            $(".eqp_statusEndTime").html(promptinfo.statusEndTime);
            $(".eqp_everQty").html(promptinfo.everQty + " 片");
            $(".eqp_nowDayQty").html(promptinfo.nowDayQty + " 片");
            $(".eqp_front24Qty").html(promptinfo.front24Qty + " 片");

            // 设置设备的维护信息
            var eqpPmInfo = eqpDetailInfo.eqpPmInfo;
            $(".lastPmTime").html(eqpPmInfo.lastPmTime);
            $(".pmStandardTime").html(eqpPmInfo.pmStandardTime);
            if (null != eqpPmInfo.haveTrackedInQty ) {
                $(".haveTrackedInQty").html(eqpPmInfo.haveTrackedInQty + "&nbsp;片");
            }
            if (null != eqpPmInfo.pmTrackInQty ) {
                $(".pmTrackInQty").html(eqpPmInfo.pmTrackInQty + "&nbsp;片");
            }
            if (null != eqpPmInfo.continueTime ) {
                $(".continueTime").html(eqpPmInfo.continueTime + "&nbsp;day");
            }
            if (null != eqpPmInfo.pmContinueTime ) {
                $(".pmContinueTime").html(eqpPmInfo.pmContinueTime + "&nbsp;day");
            }

            // 设置设备在制品信息
            var eqpWipStatistic = eqpDetailInfo.eqpWipStatistic;
            if (null != eqpWipStatistic.runWipQty ) {
                let ahtml = eqpWipStatistic.runWipQty + '&nbsp;片';
                $(".runWipQty").html(ahtml);
            }
            if (null != eqpWipStatistic.runWipStatusDuration ) {
                $(".runWipStatusDuration").html(eqpWipStatistic.runWipStatusDuration + "&nbsp;day");
            }
            if (null != eqpWipStatistic.waitWipQty ) {
                let ahtml = eqpWipStatistic.waitWipQty + '&nbsp;片';
                $(".waitWipQty").html(ahtml);
            }
            if (null != eqpWipStatistic.waitWipStatusDuration ) {
                $(".waitWipStatusDuration").html(eqpWipStatistic.waitWipStatusDuration + "&nbsp;day");
            }
            if (null != eqpWipStatistic.heldWipQty ) {
                let ahtml = eqpWipStatistic.heldWipQty + '&nbsp;片';
                $(".heldWipQty").html(ahtml);
            }
            if (null != eqpWipStatistic.heldWipStatusDuration ) {
                $(".heldWipStatusDuration").html(eqpWipStatistic.heldWipStatusDuration + "&nbsp;day");
            }
            setMenuInfo(equipmentId);
        }

        // 设置菜单信息
        function setMenuInfo(equipmentId) {
            $.ajax({
                type: "get",
                url: prefix + "/getEqpMenuInfo?equipmentId=" + equipmentId,
                success: function (result) {
                    var list = result.data;
                    $(".eqp_menu_circle").html(null);
                    var htm = "";
                    list.forEach( w =>{
                        htm += "<tr><td>" + w.menu +"</td><td>" + w.menuDesc + "</td></tr>";
                    });
                    $(".eqp_menu_circle").html(htm);
                }
            });
        }
    </script>
</body>
</html>
